<style>
#focus_<{$widgets_id}> {width:100%;min-width:<{$setting.width}>px;position:relative;overflow:hidden;}
#focus_<{$widgets_id}> .viewbox {width:<{$setting.width}>px;margin:0 auto;overflow:visible;position:relative}
#focus_<{$widgets_id}> .withdraw,
#focus_<{$widgets_id}> .slidermain li {width:<{$setting.maxwidth}>px;overflow:hidden;}
#focus_<{$widgets_id}> ,
#focus_<{$widgets_id}> .viewbox,
#focus_<{$widgets_id}> .withdraw,
#focus_<{$widgets_id}> .slidermain,
#focus_<{$widgets_id}> .slidermain li {height:<{$setting.height|default:600}>px;}
#focus_<{$widgets_id}> .slidermain li {text-align:center}
#focus_<{$widgets_id}> .withdraw {z-index:1;position:relative;left:-<{math equation=floor((y-x)/2) x=$setting.width y=$setting.maxwidth}>px;_display:inline;}
#focus_<{$widgets_id}> .slidermain li img {vertical-align:middle}
#focus_<{$widgets_id}> .slider-page {display:none;}
#focus_<{$widgets_id}> .slider-page a{position:absolute;top:50%;margin-top:-31px;z-index:3;display:block;width:28px;height:62px;line-height:62px;background:gray;background:rgba(0,0,0,.2);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000);color:#fff;text-align:center;font-size:22px;font-weight:400;font-family:simsun}
#focus_<{$widgets_id}> .slider-page a:hover{text-decoration:none;color:#fff}
#focus_<{$widgets_id}> .slider-page .prev {left:1%}
#focus_<{$widgets_id}> .slider-page .next {right:3%}
#focus_<{$widgets_id}> .slider-nav {width:100%;height:0;line-height:0;text-align:center;bottom:<{$setting.numwidth}>px;cursor:default;position:absolute;z-index:4;padding-bottom:5px}
#focus_<{$widgets_id}> .slider-nav ul {height:0;line-height:0}
#focus_<{$widgets_id}> .slider-nav li {display:inline-block;*display:inline;*zoom:1;width:<{$setting.numwidth}>px;height:<{$setting.numwidth}>px;line-height:<{$setting.numwidth}>px;margin:0 2px;background:<{$setting.bgcolor}>;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;text-align:center;color:<{$setting.color}>;overflow:hidden;cursor:pointer}
#focus_<{$widgets_id}> .slider-nav .active {background:<{$setting.hbgcolor}>;color:<{$setting.hcolor}>}
</style>
<div id="focus_<{$widgets_id}>">
    <div class="viewbox">
        <div class="withdraw">
            <ul class="slidermain clearfix">
            	<{foreach from=$data item=pic key=key name=foucus}>
                <li><a target="_blank" href="<{$pic.tolink}>"><img src="<{$pic.imgurl}>" alt="<{$pic.title}>" width="<{$setting.maxwidth}>" height="<{$setting.height}>" /></a></li>
                <{/foreach}>
            </ul>
        </div>         
    </div>
    <div class="slider-nav"><{assign var="do" value="1"}><{foreach from=$data item=item key=key2 name=count}><li<{if $do==1}> class="active"<{/if}>><{$do}></li><{assign var="do" value=$do+1}><{/foreach}></div>
    <div class="slider-page"><a class="prev" href="javascript:;">&lt;</a><a class="next" href="javascript:;">&gt;</a></div>
</div>

<script src="images/qf-focus.js"></script><!--当在一个页面中会多次调用此挂件时，请务必将此js放到<head>与</head>之间-->
<script type="text/javascript">
window.addEvent("domready",function(){
	<{if $setting.effect !='fade'}>
	new scrollFocus ('focus_<{$widgets_id}>',{		
		'duration':<{$setting.duration}>,
		'delay':<{$setting.delay}>,
		'contant':'.slidermain',
		'periodical':<{$setting.periodical}>,
		'direction':'<{if $setting.effect=='scrollx'}>horizontal<{else}><{$setting.effect}>vertical<{/if}>',
		'autoplay':<{$setting.autoplay}>
	});
	<{else}>
	new fadeFocus ('focus_<{$widgets_id}>',{
		'contant':'.slidermain',
		'duration':<{$setting.duration}>,
		'delay':<{$setting.delay}>,
		'periodical':<{$setting.periodical}>,
		'autoplay':<{$setting.autoplay}>
	});
	<{/if}>
	 /*左右滚动的显示控制*/
	$('focus_<{$widgets_id}>').addEvents({
		'mouseenter':function(){
			this.getElement(".slider-page").setStyle('display','block');
		},
		'mouseleave':function(){
			this.getElement(".slider-page").setStyle('display','none');
		}
	});
})
</script>